<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        <h2 :style="{opacity}">aBiu</h2>


    </div>


</body>
<script type="text/javascript">

    const vm = new Vue({
        el: "#root",
        data: {
            opacity: 1
        },
        methods: {

            change() {
                // 定时器，每隔16毫秒执行
                setInterval(() => {
                    vm.opacity -= 0.01      // vm.opacity 设置标签的透明度样式
                    if (vm.opacity <= 0) vm.opacity = 1
                }, 16)
            }

        },

        // vue完成模板解析并发真实DOM元素放入页面后（挂载完毕），就调用这个 mounted()
        // 切记单词不要写错，不然页面也不会报错，但是没任何作用
        mounted() {
            this.change()
        },

    })

</script>

</html>